<template>
    <div class="role-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="35%">
            <el-form :model="form" :rules="rules" ref="form" status-icon>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="form.username" auto-complete="off" placeholder="请输入用户名"
                              style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="form.email" auto-complete="off" placeholder="请输入邮箱"
                              style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="form.password" auto-complete="off" placeholder="请输入密码" type="password"
                              style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="确定密码" prop="password_confirmation">
                    <el-input v-model="form.password_confirmation" auto-complete="off" placeholder="请再次输入密码" type="password"
                              style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="角色选择" prop="roleData">
                    <el-select v-model="form.roleData" multiple placeholder="请选择角色" filterable style="width: 400px;">

                        <el-option
                            v-for="item in roleData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态选择">
                    <el-radio v-model="form.actived" label=1 border >激活</el-radio>
                    <el-radio v-model="form.actived" label=2 border>禁用</el-radio>
                </el-form-item>
                <el-form-item label="用户头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://web.shop.com:81/api/common/uploadPic"
                        :show-file-list="false"
                        :headers="jwt"
                        name="file"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="form.avatar" :src="form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('cancel');">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="btnOk('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'UserEdit',
        props: {
            dialogFormVisible: Boolean,
            data: [Object, Boolean],
            title: String,
            roleData: Array,
        },
        data() {

            return {
                form: {
                    id: null,
                    username: '',
                    email: '',
                    password: '',
                    password_confirmation: '',
                    avatar: '',
                    actived: '1',
                    roleData: []
                },
                btnLoading: false,

                jwt: { Authorization : 'Bearer' + ' ' + sessionStorage.getItem(this.$Config.tokenKey) },

                //前端验证规则
                rules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 4, max: 18, message: '用户名4-18位', trigger: 'blur' }
                    ],
                    roleData: [
                        { required: true, message: '请至少选择一个角色', trigger: 'blur'}
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确邮箱格式', trigger: 'blur' },
                    ],
                }
            }
        },
        watch: {
            'data': {
                handler: function () {
                    if (this.data) {
                        for (let k in this.form) {
                            this.form[k] = this.data[k];
                        }
                    } else {
                        for (let k in this.form) {
                            this.form[k] = '';
                        }
                    }
                },
                deep: true
            }
        },
        methods: {
            handleChange() {
            },
            btnOk(form) {
                let APP = this;

                //表单验证
                APP.$refs[form].validate((valid) => {
                    if (valid) {
                        let formData = this.form;

                        // console.log(formData);return;
                        //调用父组件的方法
                        this.$emit('val-change', formData);

                        this.btnLoading = true;
                        setTimeout(() => {
                            this.btnLoading = false
                            APP.$refs[form].clearValidate();
                        }, 1000)
                    } else {
                        return false;
                    }
                });


            },
            //上传图片成功回调
            handleAvatarSuccess(res, file) {
                if (res.code == 200) {
                    this.form.avatar = res.data
                }else {
                    this.$message.error(res.data);
                }
            },
            //上传图片前验证
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG= file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG | isPNG) && isLt2M;
            }
        },
        components: {}
    }
</script>
<style lang="less">
    .role-dialog {

    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
